<!doctype html>
<html data-framework="vue">
  <head>
    <meta charset="utf-8">
    <title>天境美城•OA</title>
    <link rel="stylesheet" href="https://unpkg.com/todomvc-app-css/index.css">
    <style>
      [v-cloak] { display: none; }
      .userinfo {
        position: absolute;
        bottom: -46px;
        width: 100%;
        font-size: 100%;
      }
      #login input {
        padding: 16px;
        text-align: center;
      }
      #login input:disabled {
        color: #ddd;
        cursor: not-allowed;
      }
      #login .control {
        display: flex;
      }
      #login-button {
        background-color: #fafafa;
      }
    </style>
  </head>
  <body>
    <section class="todoapp">
      <h2>T J M C</h2>
      <form action="#" id="login" v-on:submit.prevent="login" v-if="!user" v-cloak>
        <input v-model="username" autofocus required class="new-todo" placeholder="Username">
        <input type="password" v-model="password" required class="new-todo" placeholder="Password">
        <div class="control">
          <input type="submit" value="登录" class="new-todo" id="login-button">
          <input type="button" @click="signup" value="注册" class="new-todo">
        </div>
      </form>
      <template v-if="user" v-cloak>
        <header class="header">
          <input class="new-todo"
            v-if="user"
            autofocus autocomplete="off"
            placeholder="添加待办事项"
            v-model="newTodo"
            @keyup.enter="addTodo">
        </header>
        <section class="main" v-show="todos.length">
          <input class="toggle-all" type="checkbox" v-model="allDone">
          <ul class="todo-list">
            <li v-for="todo in filteredTodos"
              class="todo"
              :key="todo.objectId"
              :class="{ completed: todo.done, editing: todo == editedTodo }">
              <div class="view">
                <input class="toggle" type="checkbox" v-model="todo.done" @change="doneEdit(todo)">
                <label @dblclick="editTodo(todo)">{{ todo.content }}</label>
                <button class="destroy" @click="removeTodo(todo)"></button>
              </div>
              <input class="edit" type="text"
                v-model="todo.content"
                v-todo-focus="todo == editedTodo"
                @blur="doneEdit(todo)"
                @keyup.enter="doneEdit(todo)"
                @keyup.esc="cancelEdit(todo)">
            </li>
          </ul>
        </section>
        <footer class="footer" v-show="todos.length" v-cloak>
          <span class="todo-count">
            <strong>{{ remaining }}</strong> {{ remaining | pluralize }} left
          </span>
          <ul class="filters">
            <li><a href="#/all" :class="{ selected: visibility == 'all' }">全部</a></li>
            <li><a href="#/active" :class="{ selected: visibility == 'active' }">进行中</a></li>
            <li><a href="#/completed" :class="{ selected: visibility == 'completed' }">已完成</a></li>
          </ul>
          <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
            清除 完成事项
          </button>
        </footer>
        <p class="info userinfo">
          Logged in as {{user.username}} (<a @click='logout'>退出</a>)
        </p>
      </template>
    </section>
    <footer class="info">
      <p>双击编辑一个待办事项</p>
      <p>天境美城 <a href="https://vuejs.org/v2/examples/todomvc.html">企业 </a> 移动OA/ 研发团队 <a href="wechat/index1.html"> TJMC </a></p>
    </footer>
    <a href="https://github.com/leancloud/leantodo-vue"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
    <script src="https://unpkg.com/leancloud-storage@^3.0.0-beta.3/dist/av-live-query-min.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="app.js"></script>
  </body>
</html>